<template>
  <div class="audition18">
    <p>如图：</p>
    <p><br></p>
    <img src="@images/url1.png" alt="" class="img">
    <p><br></p>
    <p>1. url解析</p>
    <p>首先判断输入的是一个合法的url还是一个待搜索的关键词，根据输入内容进行url解析。解析结构如下：</p>
    <img src="@images/url2.png" alt="" class="img">
    <p><br></p>
    <p>2. DNS查询：根据域名，获取目标服务器IP地址。</p>
    <p>首先会向本地域名服务器查询，如果没有，就去根域名服务器查询</p>
    <p>如果没有，就去顶级域名服务器查询</p>
    <p>如果没有，就去权限域名服务器查询</p>
    <p>最终获取到对应的ip地址，返回给客户端。</p>
    <img src="@images/dns1.png" alt="" class="img">
    <p><br></p>
    <p>3. TCP连接</p>
    <p>经历三次握手，建立tcp连接</p>
    <p><br></p>
    <p>4. 发送http请求</p>
    <p>建议tcp连接后，浏览器向服务器发送请求，请求的内容包括请求行、请求头、请求主体。</p>
    <img src="@images/http1.png" alt="" class="img">
    <p><br></p>
    <p>5. 响应请求</p>
    <p>服务器接收到浏览器的请求后，就会进行逻辑操作，处理完成后返回一个响应消息。包括状态行、响应头、响应正文。</p>
    <img src="@images/response1.jpeg" alt="" class="img">
    <p>在服务器响应之后，http默认开始长连接keep-alive,当页面关闭后，通过四次挥手断开tcp连接。</p>
    <p><br></p>
    <p>6. 页面渲染</p>
    <p>当浏览器接收到服务器响应的资源后，首先会对资源进行解析：</p>
    <ul>
      <li>查看响应头的信息，根据不同的指示做对应处理，比如重定向，存储cookie，解压gzip，缓存资源等等</li>
      <li>查看响应头的 Content-Type的值，根据不同的资源类型采用不同的解析方式</li>
    </ul>
    <p>解析资源后，开始页面渲染，过程如下：</p>
    <p>解析html，构建DOM树</p>
    <p>解析css，生成css规则树</p>
    <p>合成DOM树和CSS规则，生成render树（渲染树）</p>
    <p>布局render树(Layout / reflow)，负责各元素的尺寸、位置计算</p>
    <p>绘制render树(reaint)，绘制页面像素信息</p>
    <p>浏览器会将各层的信息发送给 GPU，GPU 会将各层合成（ composite ），显示在屏幕上</p>
    <img src="@images/repaint1.jpeg" alt="" class="img">
  </div>
</template>

<script>
export default {
  name: 'Audition18'
}
</script>

<style>

</style>